<template>
    <view class="category-wrap">
        <navigator class="category-item" hover-class="none" :url="`/pagesGoods/goods_list/index?second_cid=${item.cid}`"
            v-for="item in hotCategories" :key="item.cid">

            <image class="icon" :src="global.FILE_DOMAIN + item.icon_url"></image>
            <text class="text">{{ item.name }}</text>
        </navigator>
    </view>
</template>

<script setup lang="ts">
import type { CategoryItem } from '@/types/home'
import { inject } from 'vue'

defineProps<{ hotCategories: CategoryItem[] }>()

// 全局属性
const global: any = inject('global')

</script>

<style lang="scss">
.category-wrap {
    margin: 20rpx 0 0;
    padding: 10rpx 0;
    min-height: 328rpx;

    display: flex;
    flex-wrap: wrap;

    .category-item {
        width: 150rpx;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-top: 20rpx;

        .icon {
            width: 100rpx;
            height: 100rpx;
            border-radius: 20rpx;
            box-shadow: 0 0 8rpx gray;
        }

        .text {
            font-size: 26rpx;
            color: #666;
            margin-top: 10rpx;
        }
    }
}
</style>